<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>亦歌Chrome应用 - 设置</title>
<style type="text/css">
body {
	font-family: arial, sans-serif;
	margin:10px;
	background: #EBEFF9;
	font-size: 13px;
}
a {
	color: #1F72D0;
	text-decoration: none;
}
a:hover {
	color: #FF8040;
	text-decoration: underline;
}
#container {
	background-color: #ffffff;
	border: 1px solid #d7dae1;
	border-radius: 20px 20px;
	padding: 10px 30px 20px 30px;
	text-align: left;
	margin: 30px auto 20px auto;
	width: 765px;
	-webkit-box-shadow: #d7dae1 0px 0px 10px 2px;
}
#header h1 {
	font-size: 30px;
	display: block;
	color: #4c88bc;
	padding: 10px 0 5px 60px;
	width: 700px;
	background: url(icon_48.png) no-repeat;
	text-shadow: 0 0 1px #99bbd9;
	margin-left: 30px;
	margin-bottom: 0px;
}
#description {
	padding:0 95px;
	margin-bottom:20px;
	color: #c0c0c0;
	line-height: 20px;
}
#footer {
	text-align: center;
	font-size: 13px;
}
#main {
	border: 1px solid #c2d4e0;
	margin-top: -1px;
	background: #ffffff;
	padding-top:10px;
}
.innerBox {
	min-height: 200px;
	padding: 20px;
}
.itemTitle {
	line-height: 30px;
	margin-left: 20px;
	font-weight: bold;
}
.item {
	line-height: 28px;
	margin-left: 40px;
}
.itemSub {
	line-height: 28px;
	margin-left: 20px;
}
#msg {
	position:absolute;
	width:150px;
	top:0px;
	left:50%;
	margin-left:-120px;
	text-align:center;
	font:bold 11px Arial, Helvetica, sans-serif;
	background-color:#FC6;
	padding:5px;
	border-radius: 0 0 5px 5px;
}
</style>
<script type="text/javascript" src="js/contextMenus.js"></script>
<script type="text/javascript">

//初始化设置
function init()
{
    var rboShowSelectionContext_1 = document.getElementById("showSelectionContext_1");
    var rboShowSelectionContext_2 = document.getElementById("showSelectionContext_2");
	
	options.showPageContext.checked = JSON.parse(localStorage["showPageContext"]);
	if (!(options.showSelectionContext.checked = JSON.parse(localStorage["showSelectionContext"])))
	{
		rboShowSelectionContext_1.disabled = true;
		rboShowSelectionContext_2.disabled = true;
	}
	if (parseInt(localStorage["showSelectionContext_Type"]) == 2) rboShowSelectionContext_2.checked = true;
	else rboShowSelectionContext_1.checked = true;
	
	options.showSelectionContext.onchange = function()
    {
	    rboShowSelectionContext_1.disabled = !options.showSelectionContext.checked;
	    rboShowSelectionContext_2.disabled = !options.showSelectionContext.checked;
		enableSaveBtn();
    };
	options.showPageContext.onchange = enableSaveBtn;
	rboShowSelectionContext_1.onchange = enableSaveBtn;
	rboShowSelectionContext_2.onchange = enableSaveBtn;
	
	disableSaveBtn();
}

//保存设置信息
function save()
{
	var rboShowSelectionContext_1 = document.getElementById("showSelectionContext_1");
    var rboShowSelectionContext_2 = document.getElementById("showSelectionContext_2");
    
	localStorage["showPageContext"] = options.showPageContext.checked
	localStorage["showSelectionContext"] = options.showSelectionContext.checked
	
	chrome.contextMenus.removeAll(function(){
		chrome.extension.sendRequest({action: "createContextMenus"}, function(response) {
			});
	});	
	
	if (rboShowSelectionContext_1.checked) localStorage["showSelectionContext_Type"] = 1;
	else localStorage["showSelectionContext_Type"] = 2;
	disableSaveBtn();
	
	showMsg();
}

function enableSaveBtn()
{
	document.getElementById("btnSave").disabled = false;
}

function disableSaveBtn()
{
	document.getElementById("btnSave").disabled = true;
}

function showMsg()
{
	document.getElementById("msg").style.display = "";
	setTimeout("hideMsg()",3000)
}

function hideMsg()
{
	document.getElementById("msg").style.display = "none";
}

</script>
</head>
<body onload="init()">
<div id="msg" style="display:none;">数据已保存</div>
<div id="container">
  <div id="header">
    <h1>亦歌Chrome应用 设置</h1>
  </div>
  <div id="description">DIY你的亦歌Chrome应用！</div>
  <div id="main">
    <div class="innerBox">
      <form id="options">
        <div class="itemTitle">右键菜单</div>
        <div class="item">
          <label>
            <input id="showPageContext" type="checkbox" name="showPageContext">
            启用右键打开亦歌应用</label>
        </div>
        <div class="item">
          <label>
            <input id="showSelectionContext" type="checkbox" name="showSelectionContext">
            播放选中歌曲</label>
          <label>
          <div class="itemSub">
            <input id="showSelectionContext_1" type="radio" name="showSelectionContext_type">
            在桌面提示中栏打开
            </label>
          </div>
          <div class="itemSub">
            <input id="showSelectionContext_2" type="radio" name="showSelectionContext_type">
            在新窗口中打开
            </label>
          </div>
        </div>
        <button id="btnSave" onclick="save()" disabled="disabled" />
        保存
        </button>
      </form>
    </div>
  </div>
</div>
</body>
</html>